<!-- eslint-disable vue/no-useless-template-attributes -->
<template>
	<div v-if="indexShow">
		<a-card :bordered="false">
			<a-form ref="searchFormRef" name="advanced_search" :model="searchFormState" class="ant-advanced-search-form">
				<a-row :gutter="24">
					<a-col :span="6">
						<a-form-item label="姓名" name="memberName">
							<a-input v-model:value="searchFormState.memberName" placeholder="请输入互助金成员姓名" />
						</a-form-item>
					</a-col>
					<a-col :span="6">
						<a-form-item label="身份证号" name="memberIdcard">
							<a-input v-model:value="searchFormState.memberIdcard" placeholder="请输入互助金成员身份证号" />
						</a-form-item>
					</a-col>
					<a-col :span="6">
						<a-form-item label="机构名称" name="orgName">
							<a-select
								v-model:value="searchFormState.orgName"
								show-search
								placeholder="请选择机构"
								:default-active-first-option="false"
								:show-arrow="false"
								:filter-option="false"
								:not-found-content="null"
								:options="memberOrgOptions"
							>
							</a-select>
						</a-form-item>
					</a-col>
					<a-col :span="6">
						<a-button type="primary" @click="tableRef.refresh()">查询</a-button>
						<a-button style="margin: 0 8px" @click="reset">重置</a-button>
					</a-col>
				</a-row>
			</a-form>
			<s-table
				ref="tableRef"
				:columns="columns"
				:data="loadData"
				:alert="options.alert.show"
				bordered
				:row-key="(record) => record.id"
				:tool-config="toolConfig"
				:row-selection="options.rowSelection"
			>
				<template #operator class="table-operator">
					<a-space>
						<a-button>
							<template #icon><DownloadOutlined /></template>
							<a href="http://localhost:82/dev/file/download?id=1833047125176205313">下载模板（互助金申请/放弃）</a>
						</a-button>
						<xn-batch-delete
							v-if="hasPerm('bizCooperationBatchDelete')"
							:selectedRowKeys="selectedRowKeys"
							@batchDelete="deleteBatchBizCooperation"
						/>
					</a-space>
				</template>
				<template #bodyCell="{ column, record }">
					<template v-if="column.dataIndex === 'memberGen'">
						{{ $TOOL.dictTypeData('GENDER', record.memberGen) }}
					</template>
					<template v-if="column.dataIndex === 'memberWork'">
						{{ $TOOL.dictTypeData('WORK_STATUS', record.memberWork) }}
					</template>
					<template v-if="column.dataIndex === 'applyInfo'">
						{{ $TOOL.dictTypeData('YSEORNO', record.applyInfo) }}
					</template>
					<template v-if="column.dataIndex === 'applyStatus'">
						{{ $TOOL.dictTypeData('APPLY_STATUS', record.applyStatus) }}
					</template>
					<template v-if="column.dataIndex === 'applyFileUrl'">
						<a-tooltip :color="'#f50'" title="仅支持pdf格式文件预览">
							<a @click="onPreview(record)">预览</a>
						</a-tooltip>

						<a-divider type="vertical" />
						<a :href="record.applyFileUrl">下载</a>
					</template>
					<template v-if="column.dataIndex === 'action'">
						<a @click="applyCoo(record, 1)">通过</a>
						<a-divider type="vertical" />
						<a-popconfirm title="确定要拒绝吗？" @confirm="applyCoo(record, 2)">
							<a-button type="link" danger size="small">拒绝</a-button>
						</a-popconfirm>
					</template>
				</template>
			</s-table>
		</a-card>
	</div>

	<preview v-if="!indexShow" ref="previewRef" @goBack="previewBack" />
</template>

<script setup name="BizCooperationApply">
	import tool from '@/utils/tool'
	import orgSelectorPlus from '@/components/Selector/orgSelectorPlus.vue'
	import { cloneDeep } from 'lodash-es'
	import bizCooperationApi from '@/api/biz/bizCooperationApi'
	import bizOrgApi from '@/api/biz/bizOrgApi'
	import preview from './preview.vue'
	import { center } from '@antv/g2plot/lib/plots/sankey/sankey'
	const searchFormState = ref({})
	const searchFormRef = ref()
	const tableRef = ref()
	const formRef = ref()
	const previewRef = ref()
	const indexShow = ref(true)

	const memberOrgOptions = ref([])

	const toolConfig = { refresh: true, height: true, columnSetting: true, striped: false }
	const columns = [
		{
			title: '申请人姓名',
			dataIndex: 'memberName',
			align: 'center'
		},
		{
			title: '申请人年龄',
			dataIndex: 'memberAge',
			align: 'center'
		},
		{
			title: '申请人性别',
			dataIndex: 'memberGen',
			align: 'center'
		},
		{
			title: '申请人身份证号',
			dataIndex: 'memberIdcard',
			align: 'center'
		},
		{
			title: '申请人工作单位及职务',
			dataIndex: 'memberOrg',
			align: 'center'
		},
		{
			title: '申请人工作状态',
			dataIndex: 'memberWork',
			align: 'center'
		},
		{
			title: '入职/退休时间',
			dataIndex: 'memberWorkTime',
			align: 'center'
		},
		{
			title: '申请人声明文件',
			dataIndex: 'applyFileUrl',
			align: 'center'
		}
	]
	// 避免请求频繁，增加定时器
	let timeout
	// 远程搜索机构
	const orgSearch = (orgName) => {
		if (timeout) {
			clearTimeout(timeout)
			timeout = null
		}
		timeout = setTimeout(() => {
			bizOrgApi.orgList({ orgName: orgName }).then((res) => {
				console.log(res)
				if (res !== null) {
					res.forEach((item) => {
						let data = {
							value: item.name,
							label: item.name
						}
						orgData.value.push(data)
					})
				}
			})
		}, 300)
	}
	// 文件预览
	const onPreview = (record) => {
		indexShow.value = false
		nextTick(() => {
			previewRef.value.onOpen(record)
		})
	}
	// 预览返回
	const previewBack = () => {
		indexShow.value = true
	}
	// 操作栏通过权限判断是否显示
	if (hasPerm(['bizCooApply', 'bizCooBack'])) {
		columns.push({
			title: '操作',
			dataIndex: 'action',
			align: 'center',
			width: 150
		})
	}
	const selectedRowKeys = ref([])
	// 列表选择配置
	const options = {
		// columns数字类型字段加入 needTotal: true 可以勾选自动算账
		alert: {
			show: true,
			clear: () => {
				selectedRowKeys.value = ref([])
			}
		},
		rowSelection: {
			onChange: (selectedRowKey, selectedRows) => {
				selectedRowKeys.value = selectedRowKey
			}
		}
	}
	const loadData = (parameter) => {
		searchFormState.value.applyType = '30'
		const searchFormParam = cloneDeep(searchFormState.value)
		return bizCooperationApi.bizCooperationPage(Object.assign(parameter, searchFormParam)).then((data) => {
			return data
		})
	}
	// 重置
	const reset = () => {
		searchFormRef.value.resetFields()
		tableRef.value.refresh(true)
	}

	// 更新申请状态
	const applyCoo = (record, type) => {
		if (type === 1) {
			record.applyStatus = '20'
		}
		if (type === 2) {
			record.applyStatus = '30'
		}
		const formDataParam = cloneDeep(toRaw(record))
		bizCooperationApi
			.bizCooperationApply(formDataParam)
			.then(() => {
				tableRef.value.refresh(true)
			})
			.finally(() => {
				tableRef.value.refresh(true)
			})
	}
	// 删除
	const deleteBizCooperation = (record) => {
		let params = [
			{
				id: record.id
			}
		]
		bizCooperationApi.bizCooperationDelete(params).then(() => {
			tableRef.value.refresh(true)
		})
	}
	// 批量删除
	const deleteBatchBizCooperation = (params) => {
		bizCooperationApi.bizCooperationDelete(params).then(() => {
			tableRef.value.clearRefreshSelected()
		})
	}

	// 获取组织结构
	const getTree = () => {
		bizOrgApi.orgTree().then((res) => {
			let data = {
				value: res[0].id,
				label: res[0].name
			}
			memberOrgOptions.value.push(data)
			res[0].children.forEach((item) => {
				let data = {
					value: item.id,
					label: item.name
				}
				memberOrgOptions.value.push(data)
			})
		})
	}

	onMounted(() => {
		getTree()
	})
</script>
